<template>
    <el-dialog :title="currentId?'编辑安排':'添加安排'" :visible.sync="showDialog_" custom-class='dialog_right dialogScroll_add MkAddArrangement ' top="0%" @close='closeDialog("addForm")' @open='openDialog'>
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight - 200)+'px'}]">
        <el-form :model="addForm.formItem" :rules="addForm.rules" ref="addForm" label-width="80px">
          <input type="text" style="display:none" />
          <el-form-item  label="路线" prop='lineId'>
            <el-select v-model="addForm.formItem.lineId" :disabled = "currentId?true:false" filterable placeholder='请选择路线（必选）' @change="changeRoute">
                <el-option  v-for="item in allLineList" :label="item.name" :value="item.id+'_'+item.totalTicket" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="总票数" prop='totalTicket'>
            <el-input v-model="addForm.formItem.totalTicket" ref="getFocus" placeholder='请输入总票数（必填）'></el-input>
          </el-form-item>

          <el-form-item  label="发车频率" prop='frequencyType'>
            <el-select v-model="addForm.formItem.frequencyType"  :disabled = "currentId?true:false" placeholder='请选择发车频率（必选）'>
              <el-option label="单次" value="ONCE"></el-option>
              <el-option label="每天" value="DAY"></el-option>
              <el-option label="每周" value="WEEK"></el-option>
              <el-option label="每月" value="MONTH"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item  label="发车时间" v-if="addForm.formItem.frequencyType">
            <el-col :span="11">
              <template v-if="addForm.formItem.frequencyType == 'ONCE'">
                <el-form-item prop="date">
                  <el-date-picker
                    :disabled = "currentId?true:false"
                    v-model="addForm.formItem.date"
                    type="date"
                    :picker-options = 'pickerOptionOnce'
                    placeholder="请选择日期（必选）">
                  </el-date-picker>
                </el-form-item>
              </template>
              <template v-else-if="addForm.formItem.frequencyType == 'DAY'">

              </template>
              <template v-else-if="addForm.formItem.frequencyType == 'WEEK'">
                <el-form-item prop="week">
                  <el-select v-model="addForm.formItem.week"  :disabled = "currentId?true:false"  placeholder="请选择日期（必选）">
                  <el-option label="周一" value="1"></el-option>
                  <el-option label="周二" value="2"></el-option>
                  <el-option label="周三" value="3"></el-option>
                  <el-option label="周四" value="4"></el-option>
                  <el-option label="周五" value="5"></el-option>
                  <el-option label="周六" value="6"></el-option>
                  <el-option label="周日" value="7"></el-option>
                </el-select>
                </el-form-item>
              </template>
              <template v-else="addForm.formItem.frequencyType == 'MONTH'">
                <el-form-item prop="day">
                  <el-select v-model="addForm.formItem.day"  :disabled = "currentId?true:false"  placeholder="请选择日期（必选）">
                  <el-option label="1日" value="1"></el-option>
                  <el-option label="2日" value="2"></el-option>
                  <el-option label="3日" value="3"></el-option>
                  <el-option label="4日" value="4"></el-option>
                  <el-option label="5日" value="5"></el-option>
                  <el-option label="6日" value="6"></el-option>
                  <el-option label="7日" value="7"></el-option>
                  <el-option label="8日" value="8"></el-option>
                  <el-option label="9日" value="9"></el-option>
                  <el-option label="10日" value="10"></el-option>
                  <el-option label="11日" value="11"></el-option>
                  <el-option label="12日" value="12"></el-option>
                  <el-option label="13日" value="13"></el-option>
                  <el-option label="14日" value="14"></el-option>
                  <el-option label="15日" value="15"></el-option>
                  <el-option label="16日" value="16"></el-option>
                  <el-option label="17日" value="17"></el-option>
                  <el-option label="18日" value="18"></el-option>
                  <el-option label="19日" value="19"></el-option>
                  <el-option label="20日" value="20"></el-option>
                  <el-option label="21日" value="21"></el-option>
                  <el-option label="22日" value="22"></el-option>
                  <el-option label="23日" value="23"></el-option>
                  <el-option label="24日" value="24"></el-option>
                  <el-option label="25日" value="25"></el-option>
                  <el-option label="26日" value="26"></el-option>
                  <el-option label="27日" value="27"></el-option>
                  <el-option label="28日" value="28"></el-option>
                </el-select>
                </el-form-item>
              </template>
            </el-col>
            <el-col :span="2" v-if="addForm.formItem.frequencyType !== 'DAY'">&nbsp;</el-col>
            <el-col :span="addForm.formItem.frequencyType !== 'DAY'?11:24">
              <el-form-item prop="time">
                <el-time-select v-model="addForm.formItem.time"  :disabled = "currentId?true:false" :picker-options="pickerOption" placeholder="请选择时间（必选）"></el-time-select>
              </el-form-item>
            </el-col>
          </el-form-item>

        </el-form>

      </el-scrollbar>
      <div slot="footer" class="dialog-footer footerStyle">
          <el-button type="primary"  class='btn-primary' :disabled = 'isSubmitBtnDisabled' @click='submitForm("addForm")' v-loading.fullscreen.lock="fullscreenLoading">保存</el-button>
          <el-button  type='primary' class='btn-cancel' :disabled = "isSubmitBtnDisabled"  @click="showDialog_ = false" size=''>取消</el-button>
      </div>
    </el-dialog>
</template>

<script>
import routeService from '../../../services/route'
import { mapState } from 'vuex'
export default {
  name: 'MkAddArrangement',
  components: {

  },
  props: ['showDialog','currentId'],
  computed: mapState({
    bodyHeight: state => state.global.bodyHeight,
    allLineList: state => state.route.allLineList,
  }),
  methods: {
    changeRoute(val) {
      if(val) {
        this.addForm.formItem.totalTicket = val.split('_')[1];
      }
    },
    deleteApprovalInput(item) {
      var index = this.addForm.formItem.passSiteArr.indexOf(item)
      if (index !== -1) {
        this.addForm.formItem.passSiteArr.splice(index, 1);
      }
    },
    addPassSite() {
      this.addForm.formItem.passSiteArr.push({
        key: Date.now(),
        siteId: '',
      })
    },
    closeDialog(formName) {
      this.$refs[formName].resetFields();
      this.$emit('closeDialog',this.isRefresh);
    },
    openDialog() {
      this.isRefresh = 'no';
      this.isSubmitBtnDisabled = false;
      if(this.currentId) {
        routeService.loadArrangementDetail({id:this.currentId}, data => {
            let form = this.addForm.formItem;
            let detail = data.data;
            form.lineId = detail.line.id+'_'+this.allLineList.filter((item) => {return item.id == detail.line.id;})[0].totalTicket;
            form.frequencyType = detail.frequencyType;
            form.time = new Date(detail.time).pattern('HH:mm');
            if(form.frequencyType == 'ONCE') {
              form.date = new Date(detail.date);
            }else if(form.frequencyType == 'DAY'){

            }else if(form.frequencyType == 'WEEK'){
              form.week = detail.week+'';
            }else if(form.frequencyType == 'MONTH'){
              form.day = detail.day+'';
            }
            this.$nextTick(function() {
              form.totalTicket = detail.totalTicket;
              this.$refs.getFocus.$el.children[0].focus();
            })

        })
      }
    },
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let form = this.addForm.formItem;
          console.log(form.date)
          let param =　{
            lineId:form.lineId.split('_')[0],
            totalTicket:form.totalTicket,
            frequencyType:form.frequencyType,
            time: form.time,
            date: form.frequencyType =='ONCE'?new Date(form.date).pattern('yyyy-MM-dd'):'',
            week:form.frequencyType =='WEEK'?form.week:'',
            day:form.frequencyType =='MONTH'?form.day:'',
          };

          this.fullscreenLoading = true;
          this.isSubmitBtnDisabled = true;
          if(this.currentId) {
            routeService.editArrangement({id:this.currentId,totalTicket:form.totalTicket},(data)=>{
              this.$message.success('编辑成功');
              this.isRefresh = 'yes';
              this.showDialog_ = false;
              this.fullscreenLoading = false;
            },(data)=>{
              this.fullscreenLoading = false;
              this.isSubmitBtnDisabled = false;
            })
          }else{
            routeService.addArrangement(param,(data)=>{
              this.$message.success('添加成功');
              this.isRefresh = 'yes';
              this.showDialog_ = false;
              this.fullscreenLoading = false;
            },(data)=>{
              this.fullscreenLoading = false;
              this.isSubmitBtnDisabled = false;
            })
          }

        }
      })
    }
  },
  watch: {
    showDialog: function(value) {
      this.showDialog_=value;
    }
  },
  data () {
    let validateTotalTicket = (rule,val,callback) => {
      if(val == '') {
        callback("请输入票数");
      }else{
        let  reg = /(^0$|^[1-9]{1}[0-9]*$)/;
        if(!reg.test(val)) {
          callback('请输入数字');
        }else{
          callback();
        }
      }
    }
    return {
      pickerOptionOnce: {
        disabledDate: function(val) {
          let now = new Date();
          let oneDayLong = 24 * 60 *60 * 1000;
          let maxDay = now.getTime() + (6 - now.getDay()) * oneDayLong + 21 * oneDayLong
          return val < new Date(new Date().getTime() - 24 *60 *60 * 1000) || val >  new Date(maxDay);
        }
      },
      pickerOption:{
        start: '06:00',
        step: '00:30',
        end: '23:30'
      },
      isSubmitBtnDisabled: false,
      fullscreenLoading: false,
      isRefresh: 'no',
      showDialog_: this.showDialog,
      addForm: {
        formItem: {
          lineId: '',
          totalTicket: '',
          frequencyType: '',
          time:'',
          date: '',
          day:'',
          week: '',
        },
        rules: {
          lineId: {required:true,message:'请选择线路',trigger:'change,blur'},
          totalTicket: {validator:validateTotalTicket,trigger:'change'},
          frequencyType: {required:true,message:'请选择频率',trigger:'change,blur'},
          time:{required:true,message:'请选择时间',trigger:'change,blur'},
          date:{required:true,message:'请选择日期',type:'date',trigger:'change,blur'},
          day:{required:true,message:'请选择日期',trigger:'change,blur'},
          week:{required:true,message:'请选择日期',trigger:'change,blur'},
        }
      }

    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
 @import '../../../assets/style/main.less';
  .MkAddArrangement{
    .addNode{
      color:@primaryColor;
      cursor: pointer;
      &:hover{
        .my-opacity(0.8);
      }
    }
    .tabStyle{
      border-collapse:collapse;
      width:100%;
      box-sizing:border-box;
      border:1px solid #dfecec;
      margin-top:10px;
      line-height: 36px;
      text-align: center;
      thead{
        td{
          border:1px solid #dfecec;
          background:@borderColor;
          color:@fontColorThree;
          /*  border:1px solid @fontColorThree;*/
        }
      }
      tbody{
        line-height: 46px;
        td{
          border-left:1px solid #dfecec;
          border-bottom:1px solid #dfecec;
        }

      }
      .inputStyle{
        border:none;
        background:@borderColor;
        height:40px !important;
        max-width:68px;
        margin:2px;
        /*line-height: 47px !important;*/
        outline: none;
      }
    }
  }
</style>
